import { doUploadImage } from '~/api/order'
interface queryFormState {
  name?: string
  number?: string
  weight?: string
  volume?: string
  packaging?: string
  imageUrl?: string[]
}
function toast(title: string) {
  wx.showToast({
    icon: 'none',
    title
  })
}
// pages/tabbar/order/components/FormPop.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    packagingArr: ['纸箱', '木箱', '托盘', '纤袋', '桶装', '薄膜', '其它'],
    visible: false as boolean,
    queryForm: {
      name: '',
      number: '',
      weight: '',
      volume: '',
      packaging: '纸箱',
      imageUrl: []
    } as queryFormState
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getValue(this: any) {
      return this.data.queryForm
    },
    confirm(this: any) {
      const { queryForm } = this.data
      if (!queryForm.name) {
        toast('请输入货物名称')
        return
      }
      if (!queryForm.number) {
        toast('请输入货物件数')
        return
      }
      if (!queryForm.weight) {
        toast('请输入货物重量')
        return
      }
      if (!queryForm.volume) {
        toast('请输入货物体积')
        return
      }
      if (queryForm.imageUrl.length === 0) {
        toast('请至少上传一张货物图片')
        return
      }
      this.triggerEvent("success", queryForm)
      this.close()
    },
    handDelImg(this: any, e: any) {
      const { queryForm } = this.data
      const dataset = e.currentTarget.dataset
      queryForm.imageUrl.splice(dataset.curren, 1)
      this.setData({
        queryForm
      })
    },
    handChooseImg(this: any) {
      const { queryForm } = this.data
      wx.chooseMedia({
        count: 9 - queryForm.imageUrl.length,
        mediaType: ['image'],
        success: (res) => {
          res.tempFiles.forEach((el) => {
            doUploadImage(el.tempFilePath).then((data: any) => {
              const queryForm = this.data.queryForm
              queryForm.imageUrl.push(data.url)
              this.setData({
                queryForm
              })
            })
          })
        }
      })
    },
    packagingChange(this: any, e: any) {
      const dataset = e.currentTarget.dataset
      const { queryForm } = this.data
      queryForm.packaging = dataset.name
      this.setData({
        queryForm
      })
    },
    // input 双向绑定
    bindKeyInput(this: any, e: any) {
      const dataset = e.currentTarget.dataset
      const { queryForm } = this.data
      queryForm[dataset.params] = e.detail.value
      if (this.data.queryForm) {
        this.setData({
          queryForm
        })
      }
    },
    open(this: any, form?: any) {
      const params: {
        visible: boolean,
        queryForm?: any
      } = {
        visible: true
      }
      if (form?.name) {
        params.queryForm = form
      }
      this.setData(params);
    },
    close(this: any) {
      this.setData({
        visible: false
      })
    },
    onVisibleChange(this: any, e: any) {
      if (!e.detail.visible) {
        this.close()
      }
    },
  }
})